<template>
  <div>
    <commonHeader :titleName="titleName" :step="step" ></commonHeader>
    <el-card style="height: 100%;">
      <div style="text-align: center;">
        <el-steps style="width: 65%; margin: auto;;padding: 16px 6%;" :space="200" :active="active" process-status="process" finish-status="success" simple>
          <el-step title="注册登陆"></el-step>
          <el-step title="提交资料"></el-step>
          <el-step title="审核签约"></el-step>
          <el-step title="开门营业"></el-step>
        </el-steps>
      </div>
      <!-- 商家信息,提交资料 -->
      <div v-if="active==1" style="width: 40%;margin: 45px 0px -4% 30%;">
        <div class="iptClass">
          <el-input v-model="form.contact_person" class="ipt" placeholder="请输入联系人姓名">
            <span slot="prepend">
              <!-- <i class="el-icon-office-building" /> -->
              联系人
            </span>
          </el-input>
        </div>
        <div class="iptClass">
          <el-input v-model="form.contact" class="ipt" placeholder="请输入联系人手机">
            <span slot="prepend">
              <!-- <i class="el-icon-office-building" /> -->
              联系手机
            </span>
          </el-input>
        </div>
        <div class="iptClass">
          <el-input v-model="form.company_name" class="ipt" placeholder="请输入企业名称">
            <span slot="prepend">
              <!-- <i class="el-icon-office-building" /> -->
              企业名称
            </span>
          </el-input>
        </div>
        <div class="iptClass">
          <el-input v-model="form.legal_person" class="ipt" placeholder="请输入法人姓名">
            <span slot="prepend">
              <!-- <i class="el-icon-office-building" /> -->
              法人姓名
            </span>
          </el-input>
        </div>
        <div class="iptClass">
          <el-input v-model="form.Unified_social_credit_code" class="ipt" placeholder="请输入统一社会信用代码">
            <span slot="prepend">
              <!-- <i class="el-icon-lollipop" /> -->
              统一社会信用代码
            </span>
          </el-input>
        </div>

        <div class="iptClass" style="display: flex;">
          <span class="spanClass">营业执照
            <el-tooltip placement="top">
              <div slot="content">请上传店铺的营业执照</div>
              <i class="el-icon-info" style="font-size: 18px;color: #c0c4cc;"></i>
            </el-tooltip>
          </span>
          <span>
            <el-upload class="avatar-uploader" :action="$api.UPLOAD_IMG" name='photo'
              :show-file-list="false" :on-success="handleAvatarSuccess">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">

              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </span>
        </div>
        <div style="text-align: center;margin-bottom: 100px;margin-top: 35px;">
          <el-button style="width: 100%;" type="primary" @click="enterpriseReview()">提交资料</el-button>
        </div>
      </div>

      <!-- 等待审核 -->
      <div v-if="active==2 && review==0" style="text-align: center;margin: 70px 0px 0px 0px;">
        <div><img width="25%" src="../../assets/审核签约.png" /></div>
        <div style="margin-top: 60px;margin-bottom: 60px;">
          <p style="font-size: 19px;">平台方会尽快审核并安排专人联系您洽谈合作细节,</p>
          <p style="font-size: 19px;">请耐心等待，如有急需，可先联系客服</p>
          <p style="color: #b4abab;">客服电话:020-05212562</p>
          <!-- <el-button type="primary" @click="checkStatus">查看审核进度</el-button> -->
        </div>
        <!-- <el-dialog style="text-align: left;font-size: 30px;" title="查看审核进度" :visible.sync="showCheckModel" width="30%" >

          <div v-if="review==0" style="width: 200px;text-align: center;padding: 20px;margin: auto;font-size: 18px;color: #2b97ea;border: 2px solid #62b1f4;">{{review_name}}</div>
          <div v-if="review==1" style="width: 200px;text-align: center;padding: 20px;margin: auto;font-size: 18px;color: #27b308;border: 2px solid #2ac109;">{{review_name}}</div>
          <div v-if="review==2" style="width: 200px;text-align: center;padding: 20px;margin: auto;font-size: 18px;color: #e41b1b;border: 2px solid #f05d5d;">{{review_name}}</div>

          <div slot="footer" style="text-align: center;">
            <el-button type="primary" @click="showCheckModel = false">确 定</el-button>
          </div>
        </el-dialog> -->
      </div>
      <!-- 拒绝审核 -->
      <div v-if="active==2 && review==2" style="text-align: center;margin: 70px 0px 0px 0px;">
        <div><img width="25%" src="../../assets/审核签约.png" /></div>
        <div style="margin-top: 40px;margin-bottom: 100px;">
          <p style="font-size: 18px;">很抱歉，您未能通过本次入驻审核，感谢您对平台的信任！</p>
          <el-button type="primary" @click="submitAgain">重新提交资料</el-button>
        </div>
      </div>
      <!-- 开门营业 -->
      <div v-if="active==3" style="text-align: center;margin: 70px 0px 0px 0px;">
        <div><img width="25%" src="../../assets/开门营业.png" /></div>
        <div style="margin-top: 40px;margin-bottom: 100px;">
          <p style="font-size: 19px;">恭喜您成功入驻了药极客平台</p>
          <div style="margin-top: 40px;">
            <el-button type="primary" @click="joinINyao">立即营业</el-button>
          </div>
        </div>
      </div>
      <!-- 倒计时进入主页 -->
      <div v-if="active==4" style="text-align: center;margin: 70px 0px 0px 0px;height: 70vh;">

        <div style="margin-top: 40px;">
          <p class='myBox' style="font-size: 19px;">正在进入主页<span v-for="dian in msg">{{dian.dian}}</span></p>
        </div>
      </div>
    </el-card>
    <!-- 脚部 -->
    <div style="margin-top: -4%;">
      <commonFooter></commonFooter>
    </div>
  </div>
</template>

<script>
  import commonHeader from "../LoginRegisterCommon/header.vue"
  import commonFooter from "../LoginRegisterCommon/footer.vue"
  export default {
    data() {
      return {
        form: {
          name: "默认值",
          legal_person: "", //法人
          contact_person: "", //联系人
          contact: "",
          company_name: "",
          Unified_social_credit_code: "",
          business_license_img_id: "",
        },
        titleName:"提交资料",
        step:"step",
        imageUrl: "",
        msg: [],
        showCheckModel: false,
        active: 1,
        review: 0,
        review_name: "",
        id: ''
      }
    },
    components: {
      commonHeader,
      commonFooter
    },
    watch: {

      //监听审核状态变化
      // review(newVal, oldVal) {
      //   if (newVal == 1) {
      //     setTimeout(() => {
      //       this.active = 3
      //     }, 1000)
      //   }
      // },
    },
    mounted() {
      let firstCome = window.localStorage.getItem("firstCome")
      let userid=  window.localStorage.getItem("userid")
      let reviewPull=  window.localStorage.getItem("review")
      if(firstCome &&firstCome==userid){
        if(reviewPull==1){
          this.$router.push("/home")
        }
        return false
      }
      this.getEnterpriseReviewStatus()

    },
    methods: {
      //返回重新提交资料
      submitAgain(){
        this.active=1
      },
      //点击查看审核状态
      // checkStatus() {
      //   this.showCheckModel = true
      //   this.getEnterpriseReviewStatus()
      // },
      //获取审核状态
     async getEnterpriseReviewStatus() {
        this.$api.getEnterpriseReviewStatus().then(res => {
          this.review = res.data.data.review
          this.review_name = res.data.data.review_name
          this.$store.state.review = res.data.data.review
          window.localStorage.setItem("review",res.data.data.review)
          let data=  res.data.data;
          if(data.review==0&&!data.Unified_social_credit_code){
            this.active = 1;
          }else if(data.review==0&&data.Unified_social_credit_code){
            this.review = 0   //页面显示用到
            this.active = 2;
          }else if(data.review==1){
            this.active = 3;
             window.localStorage.setItem("firstCome",data.id)
            this.joinINyao(this.active,data.id)
          }else if(data.review==2){
            this.review = 2 //页面显示用到
            this.active = 2;
          }
        })
      },
      async joinINyao(num,id) {
        if(num>0){
          this.active = num
        }else{
          this.active=4
        }
        if (this.active == 4) {
          let dian = {
            dian: '.'
          }
          var timeSS = setInterval(() => {
            this.msg.push(dian)
            if (this.msg.length > 4) {
              this.msg = []
            }
          }, 300)
          setTimeout(() => {
            clearInterval(timeSS); //清除定时器
            this.$router.push("/home")
          }, 2000)
        }
      },
      //提交资料
      enterpriseReview() {
        let checkName = this.checkName(this.form.contact_person)
        if(!checkName){
            return false
        }
        let checkContact = this.checkPhone(this.form.contact)
        if(!checkContact){
            return false
        }
        let checkImgId = this.checkPic(this.form.business_license_img_id)
        if(!checkImgId){
            return false
        }
        /* 显示加载中。。。 */
        const loadingOne = this.$loading({
          lock: true,
          text: '保存中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })

        this.$api.enterpriseReview(this.form).then(res => {
          this.$message({
            type: res.data.level,
            message: res.data.message
          });
          if (res.data.level == "success") {
            this.getEnterpriseReviewStatus()
            this.active = 2
            window.localStorage.setItem("active",this.active)
            loadingOne.close()
          } else {
            loadingOne.close()
          }
        })
      },
      checkPic(value) {
        if (value == '') {
          this.$message({
            message: "请上传营业执照!",
            type: 'error'
          });
          return false
        }
        return true
      },
      checkName(value) {
        if (value == '') {
          this.$message({
            message: "联系人不能为空!",
            type: 'error'
          });
          return false
        }
        return true
      },
      // 手机号码验证 11位数字
      checkPhone(phoneNumb) {
        var user = /^1[0-9]{10}$/
        if (!user.test(phoneNumb)) {
          this.$message({
            message: '手机号码格式错误！',
            type: 'error'
          });
          return false
        }

        return true
      },
      //图片上传
      handleAvatarSuccess(res, file) {
        //console.log(res.data.id)
        this.form.business_license_img_id = res.data.id
        //console.log(file)
        this.imageUrl = res.data.img_url;
      }
    }


  }
</script>

<style scoped="scoped">
  .iptClass {
    margin-bottom: 2%;
    margin-top: 2%;
    border: 1px solid #ffffff1a;
  }

  .spanClass {
    background-color: #F5F7FA;
    color: #909399;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    width: 1px;
    padding: 20px 70px 0px 52px;
    line-height: 38px;
  }

  /deep/.el-input-group__prepend {
    width: 125px;
    height: 50px;
    text-align: center;
  }

  /deep/.el-input__inner {
    height: 50px;
  }

  /* 图片上传css */
  .avatar-uploader /deep/.el-upload {
    border: 1px solid #DCDFE6;
    border-radius: 12px;
    margin-left: 45%;
    margin-top: 30px;
    margin-bottom: 30px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 160px;
    height: 160px;
    line-height: 160px;
    text-align: center;
  }

  .avatar {
    width: 160px;
    height: 160px;
    display: block;
  }
</style>
